<template>
 <div class="p-2">
    <!--引用表格-->
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <!--插槽:table标题-->
      <template #tableTitle>
        <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined" v-if="mainId!=''"> 新增成员</a-button>
        <a-button  type="primary" preIcon="ant-design:export-outlined" @click="onExportXls" v-if="mainId!=''"> 导出</a-button>
        <j-upload-button  type="primary" preIcon="ant-design:import-outlined" @click="onImportXls" v-if="mainId!=''">导入</j-upload-button>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchHandleDelete">
                <Icon icon="ant-design:delete-outlined"></Icon>
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button>批量操作
            <Icon icon="mdi:chevron-down"></Icon>
          </a-button>
        </a-dropdown>
      </template>
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
      </template>
      <!--字段回显插槽-->
      <template v-slot:bodyCell="{ column, record, index, text }">
      </template>
    </BasicTable>

    <!-- 新增成员模态框 -->
    <a-modal
      v-model:open="addMemberModalVisible"
      :title="null"
      width="900px"
      :footer="null"
      @cancel="handleAddMemberModalClose"
      class="aftersale-member-modal"
    >
      <div v-if="addMemberLoading" class="loading-container">
        <a-spin size="large" />
        <div class="loading-text">加载中...</div>
      </div>
      <div v-else class="modal-content">
        <!-- 美观的头部 -->
        <div class="modal-header">
          <div class="header-icon">
            <Icon icon="ant-design:user-add-outlined" class="member-icon" />
          </div>
          <div class="header-content">
            <h3 class="modal-title">新增售后成员</h3>
            <p class="modal-subtitle">配置售后服务团队成员信息</p>
          </div>
        </div>

        <a-form 
          ref="addMemberFormRef" 
          :model="addMemberForm" 
          :rules="addMemberRules" 
          class="enhanced-form"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 18 }"
        >
                     <a-row :gutter="24">
             <a-col :span="12">
               <a-form-item label="部门" name="departId" :rules="[{ required: true, message: '请选择部门' }]">
                 <a-select 
                   v-model:value="addMemberForm.departId" 
                   placeholder="请选择所属部门" 
                   size="large"
                   :loading="departLoading"
                   @change="handleDepartmentChange"
                   allow-clear
                   class="form-select"
                 >
                   <template #suffixIcon>
                     <Icon icon="ant-design:apartment-outlined" />
                   </template>
                   <a-select-option 
                     v-for="dept in departList" 
                     :key="dept.id" 
                     :value="dept.id"
                   >
                     <div class="select-option">
                       <Icon icon="ant-design:bank-outlined" class="option-icon" />
                       <span>{{ dept.departName }}</span>
                     </div>
                   </a-select-option>
                 </a-select>
               </a-form-item>
             </a-col>
             <a-col :span="12">
               <a-form-item label="成员" name="sysUserId" :rules="[{ required: true, message: '请选择成员' }]">
                 <a-select 
                   v-model:value="addMemberForm.sysUserId" 
                   placeholder="请选择团队成员" 
                   size="large"
                   :loading="userLoading"
                   @change="handleUserChange"
                   :disabled="!addMemberForm.departId"
                   allow-clear
                   class="form-select"
                 >
                   <template #suffixIcon>
                     <Icon icon="ant-design:user-outlined" />
                   </template>
                   <a-select-option 
                     v-for="user in userList" 
                     :key="user.id" 
                     :value="user.id"
                   >
                     <div class="select-option">
                       <a-avatar :size="20" style="background-color: #1890ff; margin-right: 8px;">
                         {{ user.realname ? user.realname[0] : 'U' }}
                       </a-avatar>
                       <span>{{ user.realname }}</span>
                     </div>
                   </a-select-option>
                 </a-select>
               </a-form-item>
             </a-col>
           </a-row>
           <a-row :gutter="24">
             <a-col :span="24">
               <a-form-item label="成员姓名" name="name">
                 <a-input 
                   v-model:value="addMemberForm.name" 
                   placeholder="成员姓名将自动填充"
                   size="large"
                   class="form-input"
                   disabled
                 >
                   <template #prefix>
                     <Icon icon="ant-design:user-outlined" />
                   </template>
                 </a-input>
               </a-form-item>
             </a-col>
           </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="成员角色" name="role" :rules="[{ required: true, message: '请选择成员角色' }]">
                <a-select 
                  v-model:value="addMemberForm.role" 
                  placeholder="请选择成员角色" 
                  size="large"
                  allow-clear
                  class="form-select"
                >
                  <template #suffixIcon>
                    <Icon icon="ant-design:team-outlined" />
                  </template>
                  <a-select-option value="项目经理">
                    <div class="role-option">
                      <a-tag color="red">项目经理</a-tag>
                      <span>负责项目整体管理</span>
                    </div>
                  </a-select-option>
                  <a-select-option value="技术负责人">
                    <div class="role-option">
                      <a-tag color="blue">技术负责人</a-tag>
                      <span>负责技术方案设计</span>
                    </div>
                  </a-select-option>
                  <a-select-option value="开发人员">
                    <div class="role-option">
                      <a-tag color="green">开发人员</a-tag>
                      <span>负责功能开发实现</span>
                    </div>
                  </a-select-option>
                  <a-select-option value="测试人员">
                    <div class="role-option">
                      <a-tag color="orange">测试人员</a-tag>
                      <span>负责质量测试保证</span>
                    </div>
                  </a-select-option>
                  <a-select-option value="运维人员">
                    <div class="role-option">
                      <a-tag color="purple">运维人员</a-tag>
                      <span>负责系统运维保障</span>
                    </div>
                  </a-select-option>
                  <a-select-option value="商务人员">
                    <div class="role-option">
                      <a-tag color="cyan">商务人员</a-tag>
                      <span>负责商务沟通协调</span>
                    </div>
                  </a-select-option>
                  <a-select-option value="客服人员">
                    <div class="role-option">
                      <a-tag color="geekblue">客服人员</a-tag>
                      <span>负责客户服务支持</span>
                    </div>
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="任务状态" name="completion">
                <a-select 
                  v-model:value="addMemberForm.completion" 
                  placeholder="请选择任务状态" 
                  size="large"
                  allow-clear
                  class="form-select"
                >
                  <template #suffixIcon>
                    <Icon icon="ant-design:clock-circle-outlined" />
                  </template>
                  <a-select-option value="未开始">
                    <div class="status-option">
                      <a-tag color="default">未开始</a-tag>
                      <span>任务尚未开始</span>
                    </div>
                  </a-select-option>
                  <a-select-option value="进行中">
                    <div class="status-option">
                      <a-tag color="processing">进行中</a-tag>
                      <span>任务正在执行</span>
                    </div>
                  </a-select-option>
                  <a-select-option value="已完成">
                    <div class="status-option">
                      <a-tag color="success">已完成</a-tag>
                      <span>任务已经完成</span>
                    </div>
                  </a-select-option>
                  <a-select-option value="已暂停">
                    <div class="status-option">
                      <a-tag color="warning">已暂停</a-tag>
                      <span>任务暂时停止</span>
                    </div>
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item label="任务内容" name="assignment">
                <a-textarea 
                  v-model:value="addMemberForm.assignment" 
                  placeholder="请详细描述该成员的具体任务内容和职责范围..."
                  :rows="4"
                  show-count
                  :maxlength="500"
                  class="form-textarea"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24" class="form-actions">
              <a-space size="middle">
                <a-button 
                  @click="handleAddMemberModalClose" 
                  size="large"
                  class="cancel-btn"
                >
                  <Icon icon="ant-design:close-outlined" />
                  取消
                </a-button>
                <a-button 
                  type="primary" 
                  @click="handleAddMemberSubmit" 
                  :loading="submitLoading"
                  size="large"
                  class="submit-btn"
                >
                  <Icon icon="ant-design:check-outlined" />
                  确定
                </a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-modal>

    <AfterSaleMembersModal ref="registerModal" @success="handleSuccess"/>

         <!-- 售后反馈弹窗 -->
     <a-modal
       v-model:open="feedbackModalVisible"
       :title="null"
       width="1200px"
       :footer="null"
       @cancel="handleFeedbackModalClose"
       class="feedback-management-modal"
     >
       <div v-if="feedbackLoading" class="loading-container">
         <a-spin size="large" />
         <div class="loading-text">加载中...</div>
       </div>
       <div v-else class="feedback-content">
         <!-- 美观的头部 -->
         <div class="feedback-header">
           <div class="header-icon">
             <Icon icon="ant-design:message-outlined" class="feedback-icon" />
           </div>
           <div class="header-content">
             <h3 class="feedback-title">售后反馈管理</h3>
             <p class="feedback-subtitle">管理客户反馈和问题处理记录</p>
           </div>
         </div>

         <!-- 操作按钮区域 -->
         <div class="feedback-actions">
           <a-space size="middle">
             <a-button 
               type="primary" 
               @click="handleAddFeedback" 
               size="large"
               class="action-btn primary-btn"
             >
               <Icon icon="ant-design:plus-outlined" />
               新增反馈
             </a-button>
             <a-button 
               type="primary"
               danger
               @click="handleBatchDeleteFeedback" 
               :disabled="selectedFeedbackKeys.length === 0"
               size="large"
               class="action-btn danger-btn"
             >
               <Icon icon="ant-design:delete-outlined" />
               批量删除
             </a-button>
           </a-space>
         </div>
         
         <!-- 反馈记录表格 -->
         <div class="feedback-table-container">
           <a-table
             :columns="feedbackColumns"
             :data-source="feedbackData"
             :pagination="{ 
               pageSize: 10,
               showSizeChanger: true,
               showQuickJumper: true,
               showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条记录`
             }"
             :row-selection="{
               selectedRowKeys: selectedFeedbackKeys,
               onChange: (keys) => selectedFeedbackKeys = keys,
             }"
             size="middle"
             bordered
             row-key="id"
             class="feedback-table"
           >
             <template #bodyCell="{ column, record }">
               <template v-if="column.dataIndex === 'action'">
                 <a-space>
                   <a-button 
                     type="primary" 
                     ghost 
                     size="small" 
                     @click="handleEditFeedback(record)"
                     class="table-action-btn"
                   >
                     <Icon icon="ant-design:edit-outlined" />
                     编辑
                   </a-button>
                   <a-popconfirm
                     title="确认删除这条反馈记录吗？"
                     @confirm="handleDeleteFeedback(record)"
                     placement="topLeft"
                   >
                     <a-button 
                       type="primary" 
                       danger 
                       ghost 
                       size="small"
                       class="table-action-btn"
                     >
                       <Icon icon="ant-design:delete-outlined" />
                       删除
                     </a-button>
                   </a-popconfirm>
                 </a-space>
               </template>
             </template>
           </a-table>
         </div>
       </div>
     </a-modal>

         <!-- 售后反馈表单弹窗 -->
     <a-modal
       v-model:open="feedbackFormVisible"
       :title="null"
       width="900px"
       :footer="null"
       @cancel="handleFeedbackFormClose"
       class="feedback-form-modal"
     >
       <div class="feedback-form-content">
         <!-- 美观的头部 -->
         <div class="form-header">
           <div class="header-icon">
             <Icon :icon="isEditingFeedback ? 'ant-design:edit-outlined' : 'ant-design:plus-circle-outlined'" class="form-icon" />
           </div>
           <div class="header-content">
             <h3 class="form-title">{{ isEditingFeedback ? '编辑售后反馈' : '新增售后反馈' }}</h3>
             <p class="form-subtitle">{{ isEditingFeedback ? '修改反馈信息和处理状态' : '记录客户问题和处理方案' }}</p>
           </div>
         </div>

         <a-form 
           ref="feedbackFormRef" 
           :model="feedbackForm" 
           :rules="feedbackRules" 
           class="enhanced-feedback-form"
           :label-col="{ span: 6 }"
           :wrapper-col="{ span: 18 }"
         >
           <a-row :gutter="24">
             <a-col :span="12">
               <a-form-item label="成员姓名" name="name">
                 <a-input 
                   v-model:value="feedbackForm.name" 
                   placeholder="成员姓名" 
                   disabled 
                   size="large"
                   class="form-input disabled-input"
                 >
                   <template #prefix>
                     <Icon icon="ant-design:user-outlined" />
                   </template>
                 </a-input>
               </a-form-item>
             </a-col>
             <a-col :span="12">
               <a-form-item label="处理状态" name="status">
                 <a-select 
                   v-model:value="feedbackForm.status" 
                   placeholder="请选择处理状态"
                   size="large"
                   class="form-select"
                 >
                   <template #suffixIcon>
                     <Icon icon="ant-design:flag-outlined" />
                   </template>
                   <a-select-option value="未解决">
                     <div class="status-option">
                       <a-tag color="orange">未解决</a-tag>
                       <span>问题待处理</span>
                     </div>
                   </a-select-option>
                   <a-select-option value="已解决">
                     <div class="status-option">
                       <a-tag color="green">已解决</a-tag>
                       <span>问题已处理</span>
                     </div>
                   </a-select-option>
                 </a-select>
               </a-form-item>
             </a-col>
           </a-row>
           <a-row>
             <a-col :span="24">
               <a-form-item label="问题描述" name="question">
                 <a-textarea 
                   v-model:value="feedbackForm.question" 
                   placeholder="请详细描述遇到的问题、故障现象或改进建议..."
                   :rows="4"
                   show-count
                   :maxlength="500"
                   class="form-textarea"
                   allow-clear
                 />
               </a-form-item>
             </a-col>
           </a-row>
           <a-row>
             <a-col :span="24">
               <a-form-item label="回复内容" name="response">
                 <a-textarea 
                   v-model:value="feedbackForm.response" 
                   placeholder="请输入处理方案、解决步骤或回复内容..."
                   :rows="4"
                   show-count
                   :maxlength="500"
                   class="form-textarea"
                   allow-clear
                 />
               </a-form-item>
             </a-col>
           </a-row>
           <a-row>
             <a-col :span="24" class="form-actions">
               <a-space size="middle">
                 <a-button 
                   @click="handleFeedbackFormClose" 
                   size="large"
                   class="cancel-btn"
                 >
                   <Icon icon="ant-design:close-outlined" />
                   取消
                 </a-button>
                 <a-button 
                   type="primary" 
                   @click="handleFeedbackSubmit" 
                   :loading="feedbackFormLoading"
                   size="large"
                   class="submit-btn"
                 >
                   <Icon icon="ant-design:check-outlined" />
                   {{ isEditingFeedback ? '更新' : '提交' }}
                 </a-button>
               </a-space>
             </a-col>
           </a-row>
         </a-form>
       </div>
     </a-modal>
   </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, unref, inject, watch, nextTick } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage'
  import AfterSaleMembersModal from './components/AfterSaleMembersModal.vue'
  import { afterSaleMembersColumns } from './AfterSales.data';
  import { afterSaleMembersList, afterSaleMembersDelete, afterSaleMembersDeleteBatch, afterSaleMembersExportXlsUrl, afterSaleMembersImportUrl, afterSaleMembersSaveOrUpdate, afterSalesRecordQuery, afterSalesRecordAdd, afterSalesRecordEdit, afterSalesRecordDelete, afterSalesRecordDeleteBatch } from './AfterSales.api';
  import { isEmpty } from "/@/utils/is";
  import { useMessage } from '/@/hooks/web/useMessage';
  import { downloadFile } from '/@/utils/common/renderUtils';
  import { defHttp } from '/@/utils/http/axios';
  import { message } from 'ant-design-vue';
  import { useUserStore } from '/@/store/modules/user';
  import { Icon } from '/@/components/Icon';
  
  const toggleSearchStatus = ref<boolean>(false);
  //接收主表id
  const mainId = inject('mainId') || '';
  //提示弹窗
  const $message = useMessage()
  const userStore = useUserStore();
  const queryParam = {};

     // 新增成员相关
   const addMemberModalVisible = ref(false);
   const addMemberLoading = ref(false);
   const submitLoading = ref(false);
   const addMemberFormRef = ref();
   const departList = ref([]);
   const userList = ref([]);
   const departLoading = ref(false);
   const userLoading = ref(false);

  // 售后反馈相关
  const feedbackModalVisible = ref(false);
  const feedbackLoading = ref(false);
  const feedbackData = ref([]);
  const selectedFeedbackKeys = ref([]);
  const currentMemberId = ref('');
  const feedbackFormVisible = ref(false);
  const feedbackFormLoading = ref(false);
  const feedbackFormRef = ref();
  const isEditingFeedback = ref(false);
  const currentFeedbackRecord = ref({});

     // 新增成员表单
   const addMemberForm = ref({
     afterSaleId: '',
     departId: '',
     sysUserId: '',
     name: '',
     role: '',
     assignment: '',
     completion: '未开始',
   });

     // 表单验证规则
   const addMemberRules = {
     departId: [{ required: true, message: '请选择部门' }],
     sysUserId: [{ required: true, message: '请选择成员' }],
     role: [{ required: true, message: '请选择成员角色' }],
   };

  // 售后反馈表单
  const feedbackForm = reactive({
    id: '',
    parentId: '',
    name: '',
    question: '',
    response: '',
    status: '未解决',
  });

  // 售后反馈表单验证规则
  const feedbackRules = {
    question: [{ required: true, message: '请输入问题描述' }],
  };

  // 售后反馈表格列配置
  const feedbackColumns = [
    {
      title: '成员姓名',
      dataIndex: 'name',
      width: 120,
    },
    {
      title: '问题描述',
      dataIndex: 'question',
      width: 250,
      ellipsis: true,
    },
    {
      title: '回复内容',
      dataIndex: 'response',
      width: 250,
      ellipsis: true,
    },
    {
      title: '处理状态',
      dataIndex: 'status',
      width: 120,
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: 150,
      fixed: 'right',
    },
  ];

  // API接口配置
  const api = {
    getAllDepart: `/sys/sysDepart/getAllDepart`,
    getUserByDepartId: `/sys/sysDepart/getUsersByDepartId`,
  };

  // 列表页面公共参数、方法
  const { prefixCls, tableContext, onImportXls, onExportXls } = useListPage({
    tableProps: {
      api: afterSaleMembersList,
      columns: afterSaleMembersColumns,
      canResize: false,
      useSearchForm: false,
      actionColumn: {
        width: 180,
        fixed:'right'
      },
      beforeFetch: (params) => {
        // 确保传递 afterSaleId 参数
        return Object.assign(params, queryParam, {
          afterSaleId: unref(mainId)
        });
      },
    },
    exportConfig: {
      name: '售后成员表',
      url: afterSaleMembersExportXlsUrl,
      params: {
        'afterSaleId': mainId
      }
    },
    importConfig: {
      url: ()=>{
        return afterSaleMembersImportUrl + '/' + unref(mainId)
      }
    }
  });

  //注册table数据
  const [registerTable, { reload, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
  
  // 监听主表ID变化，自动刷新子表数据
  watch(mainId, (newMainId) => {
    console.log('mainId changed:', newMainId);
    if (newMainId) {
      reload();
    }
  }, { immediate: false });
  const registerModal = ref();
  const formRef = ref();
  const labelCol = reactive({
    xs:24,
    sm:4,
    xl:6,
    xxl:4
  });
  const wrapperCol = reactive({
    xs: 24,
    sm: 20,
  });

    // 获取所有部门信息
  const fetchAllDepartments = async () => {
    try {
      departLoading.value = true;
      const response = await defHttp.get({ 
        url: api.getAllDepart,
      });
      console.log("获取所有部门响应： ", response);
      if (response) {
        departList.value = response || [];
      } else {
        departList.value = [];
      }
    } catch (error) {
      console.error('获取部门信息失败:', error);
      departList.value = [];
    } finally {
      departLoading.value = false;
    }
  };

  // 根据部门ID获取用户列表
  const fetchUsersByDepartId = async (departId) => {
    try {
      userLoading.value = true;
      const response = await defHttp.get({ 
        url: api.getUserByDepartId,
        params: { id: departId },
      });

      console.log('获取的部门人员',response)
      if (response) {
        userList.value = response|| [];
        console.log('userList：', userList);
      } else {
        userList.value = [];
      }
    } catch (error) {
      console.error('获取部门人员失败:', error);
      userList.value = [];
    } finally {
      userLoading.value = false;
    }
  };

  // 处理部门选择变化
  const handleDepartmentChange = (value) => {
    if (value) {
      const selectedDepart = departList.value.find(item => item.id === value);
      if (selectedDepart) {
        fetchUsersByDepartId(selectedDepart.id);
        addMemberForm.value.departId = selectedDepart.id;
      }
    } else {
      userList.value = [];
      addMemberForm.value.sysUserId = undefined;
      addMemberForm.value.name = undefined;
    }
  };

  // 处理用户选择变化
  const handleUserChange = (value) => {
    if (value) {
      const selectedUser = userList.value.find(item => item.id === value);
      if (selectedUser) {
        addMemberForm.value.sysUserId = selectedUser.id;
        addMemberForm.value.name = selectedUser.realname;
      }
    }
  };

    // 新增成员模态框关闭
   const handleAddMemberModalClose = () => {
     addMemberModalVisible.value = false;
     // 重置表单数据
     nextTick(() => {
       if (addMemberFormRef.value) {
         addMemberFormRef.value.resetFields();
       }
       // 重置表单对象
       addMemberForm.value = {
         afterSaleId: '',
         departId: '',
         sysUserId: '',
         name: '',
         role: '',
         assignment: '',
         completion: '未开始',
       };
       userList.value = [];
     });
   };

  // 提交新增成员
  const handleAddMemberSubmit = async () => {
    try {
      await addMemberFormRef.value.validate();
      
      submitLoading.value = true;
      
      // 设置售后表ID
      addMemberForm.value.afterSaleId = mainId;
      
      console.log('提交新增成员数据：', addMemberForm.value);
      
      const response = await afterSaleMembersSaveOrUpdate(addMemberForm.value, false);
      
      if (response) {
        message.success('新增成员成功');
        handleAddMemberModalClose();
        reload(); // 刷新表格
      } else {
        message.error(response || '新增成员失败1');
      }
    } catch (error) {
      console.error('新增成员失败12:', error);
      message.error('新增成员失败2');
    } finally {
      submitLoading.value = false;
    }
  };
  
     /**
    * 新增事件
    */
   function handleAdd() {
     if (!mainId) {
       message.warning('请先选择售后记录');
       return;
     }
     
     // 重置表单数据
     addMemberForm.value = {
       afterSaleId: '',
       departId: '',
       sysUserId: '',
       name: '',
       role: '',
       assignment: '',
       completion: '未开始',
     };
     
     // 获取部门信息
     fetchAllDepartments();
     
     addMemberModalVisible.value = true;
   }
  
  /**
   * 编辑事件
   */
  function handleEdit(record: Recordable) {
    registerModal.value.disableSubmit = false;
    registerModal.value.edit(record);
  }
   
  /**
   * 详情
   */
  function handleDetail(record: Recordable) {
    registerModal.value.disableSubmit = true;
    registerModal.value.edit(record);
  }
   
  /**
   * 删除事件
   */
  async function handleDelete(record) {
    await afterSaleMembersDelete({ id: record.id }, handleSuccess);
  }
   
  /**
   * 批量删除事件
   */
  async function batchHandleDelete() {
    await afterSaleMembersDeleteBatch({ ids: selectedRowKeys.value }, handleSuccess);
  }
   
  /**
   * 成功回调
   */
  function handleSuccess() {
    (selectedRowKeys.value = []) && reload();
  }
   
  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: '编辑',
        onClick: handleEdit.bind(null, record),
      },
      {
        label: '售后反馈',
        onClick: handleFeedback.bind(null, record),
        color: 'success',
      },
    ];
  }
   
  /**
   * 下拉操作栏
   */
  function getDropDownAction(record) {
    return [
      {
        label: '详情',
        onClick: handleDetail.bind(null, record),
      }, {
        label: '删除',
        popConfirm: {
          title: '是否确认删除',
          confirm: handleDelete.bind(null, record),
          placement: 'topLeft',
        },
      }
    ]
  }

  /**
   * 查询
   */
  function searchQuery() {
    reload();
  }
  
  /**
   * 重置
   */
  function searchReset() {
    selectedRowKeys.value = [];
    //刷新数据
    reload();
  }

  /**
   * 售后反馈相关函数
   */
  
  // 打开售后反馈弹窗
  async function handleFeedback(record) {
    currentMemberId.value = record.id;
    feedbackModalVisible.value = true;
    await loadFeedbackData(record.id);
  }

  // 加载售后反馈数据
  async function loadFeedbackData(parentId) {
    try {
      feedbackLoading.value = true;
      const response = await afterSalesRecordQuery({ parentId });
      if (response) {
        feedbackData.value = response || [];
      } else {
        feedbackData.value = [];
      }
    } catch (error) {
      console.error('获取售后反馈数据失败:', error);
      feedbackData.value = [];
    } finally {
      feedbackLoading.value = false;
    }
  }

  // 关闭售后反馈弹窗
  function handleFeedbackModalClose() {
    feedbackModalVisible.value = false;
    selectedFeedbackKeys.value = [];
    feedbackData.value = [];
    currentMemberId.value = '';
  }

  // 新增售后反馈
  function handleAddFeedback() {
    isEditingFeedback.value = false;
    // 获取当前成员的姓名
    const currentMemberName = getCurrentMemberName();
    Object.assign(feedbackForm, {
      id: '',
      parentId: currentMemberId.value,
      name: currentMemberName,
      question: '',
      response: '',
      status: '未解决',
    });
    feedbackFormVisible.value = true;
  }

  // 获取当前成员姓名的辅助函数
  function getCurrentMemberName() {
    // 从表格数据中查找当前成员的姓名
    const tableData = getDataSource();
    const currentMember = tableData.find(item => item.id === currentMemberId.value);
    return currentMember ? currentMember.name : '';
  }

  // 编辑售后反馈
  function handleEditFeedback(record) {
    isEditingFeedback.value = true;
    currentFeedbackRecord.value = record;
    Object.assign(feedbackForm, {
      id: record.id,
      parentId: record.parentId,
      name: record.name,
      question: record.question,
      response: record.response,
      status: record.status,
    });
    feedbackFormVisible.value = true;
  }

  // 删除售后反馈
  async function handleDeleteFeedback(record) {
    await afterSalesRecordDelete({ id: record.id }, () => {
      message.success('删除成功');
      loadFeedbackData(currentMemberId.value);
    });
  }

  // 批量删除售后反馈
  async function handleBatchDeleteFeedback() {
    if (selectedFeedbackKeys.value.length === 0) {
      message.warning('请选择要删除的记录');
      return;
    }
    await afterSalesRecordDeleteBatch({ ids: selectedFeedbackKeys.value }, () => {
      message.success('批量删除成功');
      selectedFeedbackKeys.value = [];
      loadFeedbackData(currentMemberId.value);
    });
  }

  // 提交售后反馈表单
  async function handleFeedbackSubmit() {
    try {
      await feedbackFormRef.value.validate();
      feedbackFormLoading.value = true;
      
      const apiCall = isEditingFeedback.value ? afterSalesRecordEdit : afterSalesRecordAdd;
      const response = await apiCall(feedbackForm);
      
      if (response.success) {
        message.success(isEditingFeedback.value ? '编辑成功' : '新增成功');
        feedbackFormVisible.value = false;
        loadFeedbackData(currentMemberId.value);
      } else {
        message.error(response.message || '操作失败');
      }
    } catch (error) {
      console.error('提交失败:', error);
      message.error('提交失败');
    } finally {
      feedbackFormLoading.value = false;
    }
  }

  // 关闭售后反馈表单
  function handleFeedbackFormClose() {
    feedbackFormVisible.value = false;
    Object.assign(feedbackForm, {
      id: '',
      parentId: '',
      name: '',
      question: '',
      response: '',
      status: '未解决',
    });
  }
</script>

<style lang="less" scoped>
  .antd-modal-form {
    padding: 14px;
  }

  // 新增成员模态框样式
  .aftersale-member-modal {
    :deep(.ant-modal-content) {
      border-radius: 12px;
      overflow: hidden;
    }

    :deep(.ant-modal-body) {
      padding: 0;
    }

    .loading-container {
      text-align: center;
      padding: 50px;
      
      .loading-text {
        margin-top: 16px;
        color: #666;
        font-size: 14px;
      }
    }

    .modal-content {
      .modal-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 32px;
        padding: 20px 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px 12px 0 0;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);

        .header-icon {
          width: 56px;
          height: 56px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.2);
          display: flex;
          align-items: center;
          justify-content: center;
          backdrop-filter: blur(10px);
          border: 2px solid rgba(255, 255, 255, 0.3);

          .member-icon {
            font-size: 24px;
            color: white;
          }
        }

        .header-content {
          .modal-title {
            margin: 0;
            font-size: 20px;
            font-weight: 600;
            color: white;
          }

          .modal-subtitle {
            margin: 4px 0 0 0;
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
          }
        }
      }

      .enhanced-form {
        padding: 0 24px 24px;

        .ant-form-item {
          margin-bottom: 24px;

          .ant-form-item-label {
            > label {
              font-weight: 600;
              color: #262626;
              font-size: 15px;
            }
          }

                     .form-input {
             border-radius: 8px;
             border: 2px solid #e8e8e8;
             transition: all 0.3s;
             font-size: 14px;
             
             &:hover {
               border-color: #40a9ff;
             }
             
             &:focus, &.ant-input-focused {
               border-color: #1890ff;
               box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1);
             }

             .anticon {
               color: #8c8c8c;
             }
           }

           .form-select {
             border-radius: 8px;
             
             :deep(.ant-select-selector) {
               border: 2px solid #e8e8e8;
               border-radius: 8px;
               transition: all 0.3s;
             }

             &:hover :deep(.ant-select-selector) {
               border-color: #40a9ff;
             }

             &.ant-select-focused :deep(.ant-select-selector) {
               border-color: #1890ff;
               box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1);
             }

             :deep(.ant-select-arrow) {
               color: #8c8c8c;
             }
           }

          .form-textarea {
            border-radius: 8px;
            border: 2px solid #e8e8e8;
            transition: all 0.3s;
            font-size: 14px;
            resize: vertical;
            
            &:hover {
              border-color: #40a9ff;
            }
            
            &:focus, &.ant-input-focused {
              border-color: #1890ff;
              box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1);
            }
          }

          .select-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 0;

            .option-icon {
              color: #8c8c8c;
            }
          }

          .role-option,
          .status-option {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 4px 0;

            span {
              font-size: 12px;
              color: #666;
            }
          }
        }

        .form-actions {
          text-align: center;
          margin-top: 32px;
          padding-top: 24px;
          border-top: 1px solid #f0f0f0;

          .cancel-btn {
            border-radius: 8px;
            border: 2px solid #d9d9d9;
            font-weight: 500;
            transition: all 0.3s;

            &:hover {
              border-color: #40a9ff;
              color: #40a9ff;
            }
          }

          .submit-btn {
            border-radius: 8px;
            font-weight: 500;
            background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
            border: none;
            box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
            transition: all 0.3s;

            &:hover {
              background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
              box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
              transform: translateY(-1px);
            }
          }
        }
      }
    }
  }

     // 下拉框选项样式优化
   :deep(.ant-select-dropdown) {
     border-radius: 8px;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);

     .ant-select-item {
       border-radius: 6px;
       margin: 2px 4px;
       
       &:hover {
         background: #f0f7ff;
       }

       &.ant-select-item-option-selected {
         background: #e6f7ff;
         font-weight: 500;
       }
     }
   }

   // 售后反馈管理模态框样式
   .feedback-management-modal {
     :deep(.ant-modal-content) {
       border-radius: 12px;
       overflow: hidden;
     }

     :deep(.ant-modal-body) {
       padding: 0;
     }

     .feedback-content {
       .feedback-header {
         display: flex;
         align-items: center;
         gap: 16px;
         margin-bottom: 24px;
         padding: 20px 24px;
         background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
         border-radius: 12px 12px 0 0;
         box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);

         .header-icon {
           width: 56px;
           height: 56px;
           border-radius: 50%;
           background: rgba(255, 255, 255, 0.2);
           display: flex;
           align-items: center;
           justify-content: center;
           backdrop-filter: blur(10px);
           border: 2px solid rgba(255, 255, 255, 0.3);

           .feedback-icon {
             font-size: 24px;
             color: white;
           }
         }

         .header-content {
           .feedback-title {
             margin: 0;
             font-size: 20px;
             font-weight: 600;
             color: white;
           }

           .feedback-subtitle {
             margin: 4px 0 0 0;
             color: rgba(255, 255, 255, 0.8);
             font-size: 14px;
           }
         }
       }

       .feedback-actions {
         padding: 0 24px 20px;

         .action-btn {
           border-radius: 8px;
           font-weight: 500;
           transition: all 0.3s;

           &.primary-btn {
             background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
             border: none;
             box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);

             &:hover {
               background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
               box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
               transform: translateY(-1px);
             }
           }

           &.danger-btn {
             background: linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%);
             border: none;
             box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);

             &:hover:not(:disabled) {
               background: linear-gradient(135deg, #ff7875 0%, #ff4d4f 100%);
               box-shadow: 0 4px 12px rgba(255, 77, 79, 0.4);
               transform: translateY(-1px);
             }

             &:disabled {
               opacity: 0.5;
               cursor: not-allowed;
               transform: none;
             }
           }
         }
       }

       .feedback-table-container {
         padding: 0 24px 24px;

         .feedback-table {
           border-radius: 8px;
           overflow: hidden;

           :deep(.ant-table-thead > tr > th) {
             background: #fafafa;
             font-weight: 600;
             color: #262626;
           }

           .table-action-btn {
             border-radius: 6px;
             font-size: 12px;
             transition: all 0.3s;

             &:hover {
               transform: translateY(-1px);
             }
           }
         }
       }
     }
   }

   // 售后反馈表单模态框样式
   .feedback-form-modal {
     :deep(.ant-modal-content) {
       border-radius: 12px;
       overflow: hidden;
     }

     :deep(.ant-modal-body) {
       padding: 0;
     }

     .feedback-form-content {
       .form-header {
         display: flex;
         align-items: center;
         gap: 16px;
         margin-bottom: 32px;
         padding: 20px 24px;
         background: linear-gradient(135deg, #fa8c16 0%, #d46b08 100%);
         border-radius: 12px 12px 0 0;
         box-shadow: 0 4px 12px rgba(250, 140, 22, 0.3);

         .header-icon {
           width: 56px;
           height: 56px;
           border-radius: 50%;
           background: rgba(255, 255, 255, 0.2);
           display: flex;
           align-items: center;
           justify-content: center;
           backdrop-filter: blur(10px);
           border: 2px solid rgba(255, 255, 255, 0.3);

           .form-icon {
             font-size: 24px;
             color: white;
           }
         }

         .header-content {
           .form-title {
             margin: 0;
             font-size: 20px;
             font-weight: 600;
             color: white;
           }

           .form-subtitle {
             margin: 4px 0 0 0;
             color: rgba(255, 255, 255, 0.8);
             font-size: 14px;
           }
         }
       }

       .enhanced-feedback-form {
         padding: 0 24px 24px;

         .ant-form-item {
           margin-bottom: 24px;

           .ant-form-item-label {
             > label {
               font-weight: 600;
               color: #262626;
               font-size: 15px;
             }
           }

           .form-input {
             border-radius: 8px;
             border: 2px solid #e8e8e8;
             transition: all 0.3s;
             font-size: 14px;
             
             &:hover:not(.disabled-input) {
               border-color: #40a9ff;
             }
             
             &:focus, &.ant-input-focused {
               border-color: #1890ff;
               box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1);
             }

             &.disabled-input {
               background-color: #f5f5f5;
               color: #999;
               cursor: not-allowed;
             }

             .anticon {
               color: #8c8c8c;
             }
           }

           .form-select {
             border-radius: 8px;
             
             :deep(.ant-select-selector) {
               border: 2px solid #e8e8e8;
               border-radius: 8px;
               transition: all 0.3s;
             }

             &:hover :deep(.ant-select-selector) {
               border-color: #40a9ff;
             }

             &.ant-select-focused :deep(.ant-select-selector) {
               border-color: #1890ff;
               box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1);
             }

             :deep(.ant-select-arrow) {
               color: #8c8c8c;
             }
           }

           .form-textarea {
             border-radius: 8px;
             border: 2px solid #e8e8e8;
             transition: all 0.3s;
             font-size: 14px;
             resize: vertical;
             
             &:hover {
               border-color: #40a9ff;
             }
             
             &:focus, &.ant-input-focused {
               border-color: #1890ff;
               box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1);
             }
           }

           .status-option {
             display: flex;
             align-items: center;
             gap: 12px;
             padding: 4px 0;

             span {
               font-size: 12px;
               color: #666;
             }
           }
         }

         .form-actions {
           text-align: center;
           margin-top: 32px;
           padding-top: 24px;
           border-top: 1px solid #f0f0f0;

           .cancel-btn {
             border-radius: 8px;
             border: 2px solid #d9d9d9;
             font-weight: 500;
             transition: all 0.3s;

             &:hover {
               border-color: #40a9ff;
               color: #40a9ff;
             }
           }

           .submit-btn {
             border-radius: 8px;
             font-weight: 500;
             background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
             border: none;
             box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
             transition: all 0.3s;

             &:hover {
               background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
               box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
               transform: translateY(-1px);
             }
           }
         }
       }
     }
   }
 </style>
